<template>
  <div>
    <div :style="{height: toolbarHei +'px'}"></div>
    <nut-navbar title="订单详情" left-text="返回" left-show @click-back="clickLeft"></nut-navbar>
    <div>
      <div class="info">
        <div  style="font-size: 18px;color: black;">{{invoice.buName}}</div>
        <div class="mt5"  style="font-size: 14px;display: flex;">
          <div style="flex:1;">{{invoice.billNo}}</div>
          <div>{{invoice.billDate}}</div>
        </div>
        <div style="display:flex;">
           <span style="margin-right:50px;flex:1;">
              <nut-price :price="invoice.amount"></nut-price>
            </span>
          <nut-space>
            <nut-tag type="success">
              {{invoice.billStateName}}
            </nut-tag>
            <nut-tag >
              {{invoice.printState}}
            </nut-tag>
            <nut-tag type="primary">{{invoice.skState}}</nut-tag>
          </nut-space>
        </div>
        <div style="font-size:13px;padding: 3px;margin-top:5px;" v-if="invoice.remark">
          <nut-tag color="grey">{{invoice.remark}}</nut-tag>
        </div>
      </div>
      <div  style="height: calc(100vh - 190px);overflow: auto;" >
        <goodItem :list="invoice.infos"></goodItem>
      </div>
    </div>
  </div>
</template>
<script setup>
import tool from "@/utils/tool";
import {useGlobal} from "@/stores/useGlobal";
const global = useGlobal()
import goodItem from "@/components/zd/goodItem.vue";
import {computed, onActivated, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
const router = useRouter()
const route = useRoute()
const billNo = ref('')
const invoice = ref({})
const toolbarHei = computed(() => {
  return global.statusBarHeight
})
const clickLeft = () => {
 router.go(-1)
}
onActivated(() => {
  getList()
})
const getList = () => {
  billNo.value =  route.query.billNo
  if(billNo.value) {
    tool.post('app/xsdetail', {billNo: billNo.value}).then(ret => {
      ret.data.infos.map(row => {
        row.amount = tool.xe.toFixed(row.amount, 2)
        row.price = tool.xe.toFixed(row.price, 2)
        row.deduction = tool.xe.toFixed(row.deduction, 2)
      })
      ret.data.amount = tool.xe.toFixed(ret.data.amount, 2)
      ret.data.infos.map(row => {
        row.name = row.invName
        row.deduction = tool.xe.toNumber(row.deduction)
      })
      invoice.value = ret.data
    })
  }

}
const edit = () => {
  if(tool.xe.toNumber(invoice.value.printNo) !== 0) {
    tool.confirm('票据已打印,修改后请通知后台重新打印','提示').then(() => {
      setData()
    })
  } else {
    setData()
  }
}
const setData = () => {
  let infos = invoice.value.infos
  global.cartList = infos
  global.cart.billId = invoice.value.id
  global.cart.buId = invoice.value.buId
  global.cart.buName = invoice.value.buName
  router.push({name: 'xsGood', query:{
      buId: invoice.value.buId,
      buName: invoice.value.buName,
      billId: invoice.value.id,
    }})
}
const del = () => {
  tool.confirm('确定删除？').then(() => {
    if(tool.xe.toNumber(invoice.value.printNo) !== 0) {
      tool.confirm('票据已打印,是否要删除','提示').then(() => {
        doDel()
      })
    } else {
      doDel()
    }
  })
}
const doDel = () => {
  // tool.post('app/delBill', {billId: invoice.value.id}).then(ret => {
  //   if(ret.stat) router.go(-1)
  // })
}

</script>

<style scoped lang="scss">

.cell {
  width: 60px;
}
.info {
  font-size: 15px;
  width: 100%;
  padding: 5px 0;
  color: #6b6d71;
  td {
    padding: 2px 0;
  }
}
.good {
  background-color: white;
  padding: 10px;
  margin: 10px 5px 0 5px;
  font-size: 14px;
  color: #333333;
  border-radius: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.price {
  color: #c45656;
}
.footer {
  background-color: red;
  height: 35px;
  line-height: 35px;
}
</style>